<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      v-loading="loading"
      req-method="get"
      reqUrl="/api/sterilization/target/list"
      :column="classesColumn"
    )
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD hh:mm:ss')}}
      template(slot="action" slot-scope="text, scope")
        el-link(@click="actionHandle(scope, 'info')" type="success") 查看二维码
    el-dialog(
      title="二维码"
      append-to-body
      center
      destroy-on-close
      :visible="visible"
      @close="$_handleCancel"
    )
      div.qrCode
        div(id="qrCode" ref="qrCodeDiv")
      p.tr
        el-button(size="small" @click="printHandle") 下载
        el-button(size="small" type="primary" @click="visible = false") 关闭
</template>
<script>
import QRCode from 'qrcodejs2'
import { mapGetters } from 'vuex'
export default {
  components: {
    QRCode
  },
  data () {
    return {
      classesColumn: [
        {
          prop: 'title',
          label: '时间'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'created',
          label: '创建时间'
        },
        {
          prop: 'action',
          label: '操作'
        }
      ],

      loading: false,
      row: [],

      visible: false,
      qrCodeData: 'https://example.com'
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          label: '物资分类',
          key: 'type',
          type: 'select',
          fieldProps: {
            options: [
              {
                id: 1,
                name: '借出记录'
              },
              {
                id: 2,
                name: '归还记录'
              },
              {
                id: 3,
                name: '领用记录'
              }
            ],
            props: { value: 'id', label: 'name' }
          },
          initialValue: 1
        }
      ]
    }
  },
  created () {
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    actionHandle (row, type = 'unbind') {
      this.visible = true
      setTimeout(() => {
        const data = {
          id: row.id,
          name: row.title
        }
        this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
          text: data,
          width: 400,
          height: 400,
          colorDark: '#333333',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.L
        })
      }, 500)
    },

    printHandle () {
      const nodeList = Array.prototype.slice.call(this.qrcode._el.children)
      const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')	// 选出图片类型
      // 构建画布
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      canvas.getContext('2d').drawImage(img, 0, 0)
      // 构造url
      const url = canvas.toDataURL('image/png')
      const a = document.createElement('a')
      a.href = url
      a.download = `二维码.png`
      // 触发a链接点击事件，浏览器开始下载文件
      a.click()
    },

    // 对外抛出cancel事件
    $_handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.video{
  width: 100%;
  height: 560px
}
.close{
  margin-top: 20px;
}
.qrCode{
  display: flex;
  justify-content: center;
}
</style>
